import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Linking,
    StyleSheet
} from 'react-native';

import {
    getBundleId
} from 'react-native-device-info';

import {
    Press,
    Layout,
    Loading
} from './../../../components';

import Header from './header';

import PropTypes from 'prop-types';

import connect from './../../../utils/connect';

import userAction from './../../../state/actions/user';
import * as userTypes from './../../../state/types/user';


interface Props {
    user: any,
    params: any,
    userActions: any,
    commonActions: any,
    userId: string | number
}

@connect([`user`], {
    userActions: userAction
})
class Profile extends PureComponent<Props> {
    static defaultProps = {
        userId: 4198,
        params: {}
    }

    static contextTypes = {
        listenTabIn:PropTypes.func
    }

    componentDidMount() {
        this.context.listenTabIn(this.getUserInfo);
    }

    private getUserInfo = async () => {
        this.userActions[
            userTypes.loginUser
        ]();
        this.userActions[
            userTypes.getUserItemsTotal
        ]();
    }

    get loginUser() {
        const {
            loginUser
        } = this.userState;
        return loginUser;
    }

    get Data() {
        return this.loginUser;
    }

    get photos() {
        const {
            photos = []
        } = this.Data;
        return photos.map((item:any) => item.url)
    }

    get userActions(): any {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    get userState() {
        const {
            user
        } = this.props;
        return user || {};
    }

    get userStatus() {
        const {
            userStatus
        } = this.userState;
        return userStatus || {};
    }

    get chattedCount() {
        const {
            chattedCount = 0
        } = this.userStatus;
        return chattedCount;
    }

    get likedCount() {
        const {
            likedCount = 0
        } = this.userStatus;
        return likedCount;
    }

    get visitorCount() {
        const {
            visitorCount = 0
        } = this.userStatus;
        return visitorCount;
    }

    private _onRateUs =() => {
        Linking.openURL(
            `https://play.google.com/store/apps/details?id=${getBundleId()}`
        )
    }

    get Content() {
        return (
            <View style={styles.container}>
                <Header data={this.Data} />
                <View style={styles.contentStyle}>
                    <View style={styles.totalNum}>
                        <View style={styles.totalNumItem}>
                            <Text style={styles.number}>
                                {this.likedCount}
                            </Text>
                            <Text style={styles.nameStyle}>
                                Favorites
                            </Text>
                        </View>
                        <View style={styles.totalNumItem}>
                            <Text style={styles.number}>
                                {this.chattedCount}
                            </Text>
                            <Text style={styles.nameStyle}>
                                Online Chats
                            </Text>
                        </View>
                        <View style={styles.totalNumItem}>
                            <Text style={styles.number}>
                                {this.visitorCount}
                            </Text>
                            <Text style={styles.nameStyle}>
                                Visitors
                            </Text>
                        </View>
                    </View>
                    {/*<Press style={styles.buttonStyle} onPress={this._onRateUs}>*/}
                        {/*<Text style={styles.rateText}>*/}
                            {/*Rate us*/}
                        {/*</Text>*/}
                    {/*</Press>*/}
                </View>
            </View>
        )
    }

    render() {
        return (
            <Layout
                bar={false}
                header={false}
                scroll={false}
                padding={false}
            >
                {!!this.Data ? this.Content : (
                    <Loading.container />
                )}
            </Layout>
        )
    }
}

export default Profile;

const styles = StyleSheet.create({
    container: {
        flex:1,
       paddingBottom:36
    },
    contentStyle:{
        flex:1
    },
    totalNum:{
        paddingVertical:16,
        flexDirection:`row`,
        justifyContent:`center`
    },
    number:{
        fontSize:18,
        color:`#000`,
        marginBottom:4,
        fontWeight:`bold`,
        textAlign:`center`
    },
    nameStyle:{
        fontSize:15,
        color:`#666666`,
        textAlign:`center`
    },
    totalNumItem:{
        paddingHorizontal:24
    },
    buttonStyle:{
        height:48,
        width:220,
        marginTop:24,
        alignSelf:`center`,
        alignItems:`center`,
        justifyContent:`center`,
        backgroundColor:`#ea9100`
    },
    rateText:{
        fontSize:16,
        color:`#fff`,
        fontWeight:`bold`
    }
}) as any;